import React,{ useState } from 'react'
import Header from '@c/header/Header'
import { useHistory } from 'react-router-dom'


import {Conback,Container} from '../name/StyledName.js'

import Icon from '@a/images/home/iconerr.png'


const Emergency = (props) => {
    let [state,setState] = useState({
        pname: props.location.state.pname,
        ptel: props.location.state.ptel
    })
    let history = useHistory()

    const handleClick = () => {
        history.push('/personalinfo',state)
    }
    const handleChangename = (e) => {
        setState({
            pname:e.target.value,
            ptel:state.ptel
        })
    }
    const handleChangephone = (e) => {
        setState({
            pname:state.pname,
            ptel:e.target.value,
        })
    }
    const handleClearname = (e) => {
        setState({
            pname:'',
            ptel:state.ptel
        })
    }
    const handleClearphone = (e) => {
        setState({
            pname:state.pname,
            ptel:''
        })
    }

    return (
        <Conback>
            <Header
                title="紧急联系人"
                onChangeClick={handleClick}
            ></Header>
            <Container>
                <span>姓名</span>
                <div>
                    <input type="text" name="name" value={state.pname} onChange={handleChangename} autoComplete="off" />
                    <img src={`${Icon}`} alt="" onClick={handleClearname}/>
                </div>
            </Container>
            <Container>
                <span>电话</span>
                <div>
                    <input type="text" name="phone" value={state.ptel} onChange={handleChangephone} autoComplete="off" />
                    <img src={`${Icon}`} alt="" onClick={handleClearphone}/>
                </div>
            </Container>
        </Conback>
    )
}

export default Emergency